import React, { memo, useEffect, useState } from "react";
import type { FC, ReactNode } from "react";
import { AlbumWrapper } from "./style";
import { useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "@/store";
import { feachAlubmDetailAction } from "./store";
import { shallowEqual } from "react-redux";
import { formatCreateTime } from "@/utils/format";
import { CloseCircleOutlined } from "@ant-design/icons";
import AreaItemv4 from "@/components/area-itemv4";
import AreaItemv1 from "@/components/area-itemv1";
import AreaHeaderv2 from "@/components/area-headerv2";
import AreaModalv1 from "@/components/area-modalv1";

interface IProps {
  children?: ReactNode;
}

const Album: FC<IProps> = () => {
  const { albumId } = useParams()
  // 控制desModal显示隐藏
  const [isDesModal, setIsDesModal] = useState(0)

  const { albumSongs, album, hotAlbums } = useAppSelector((state) => ({
    albumSongs: state.album.albumSongs,
    album: state.album.album,
    hotAlbums: state.album.hotAlbums
  }), shallowEqual)

  const dispatch = useAppDispatch()
  useEffect(() => {
    if (albumId) {
      dispatch(feachAlubmDetailAction(Number(albumId)))
    }
  }, [dispatch, albumId])

  // const handleCancel = () => {
  //   setIsDesModal(0)
  // }

  // const handleShowDes = () => {
  //   setIsDesModal(1)
  // }

  // // 播放歌曲
  // const handlePlay = () => {
  //   // 1.将歌单的歌曲 添加到播放列表中
  //   albumSongs.forEach(item => {
  //     dispatch(AddPlaySongListAction(item))
  //   })
  //   // 2.播放当前的歌单第一首歌曲
  //   dispatch(changeSongdetailAction(albumSongs[0].id))
  // }
  const onShowDesFn = (isDes: number) => {
    setIsDesModal(isDes)
  }

  return <AlbumWrapper>
    {Object.keys(album).length > 0 &&
      <AreaHeaderv2 itemData={album} playList={albumSongs} onShowDesFn={onShowDesFn} />
    }
    <div className="album-content">
      {
        albumSongs.length > 0 && albumSongs.map((item, index) => (
          <AreaItemv4 key={item.id} itemData={item} index={index} />
        ))
      }
      <p className="time">发行于 {formatCreateTime(album.publishTime, "YYYY年MM月DD日")}</p>
      <p>©</p>
    </div>
    <div className="footer">
      <div className="footer-title">More by {album?.artist?.name}</div>
      <div className="coninter">
        {
          hotAlbums.map(item => (
            <AreaItemv1 key={item.id} itemDate={item} urlwidth={620} navigatePath="/album" />
          ))
        }
      </div>
    </div>
    <AreaModalv1 modalText="专辑" onCancel={onShowDesFn} isDesModal={isDesModal} modelDes={album.description} />
    {/* <div className="modal" style={{ display: isDesModal ? "block" : "none" }}>
      <div className="heder">
        <div className="left-title">专辑介绍</div>
        <div className="cancel" onClick={handleCancel}><CloseCircleOutlined height={"2em"} width={"2em"} /></div>
      </div>
      <div className="coniner">
        {album.description}
      </div>
    </div> */}
  </AlbumWrapper>;
};

export default memo(Album);